import { cn } from '../lib/utils'

interface SkeletonProps {
  className?: string
  variant?: 'text' | 'circular' | 'rectangular'
  width?: number | string
  height?: number | string
  animation?: 'pulse' | 'wave' | 'none'
}

export function Skeleton({
  className,
  variant = 'rectangular',
  width,
  height,
  animation = 'pulse'
}: SkeletonProps) {
  return (
    <div
      className={cn(
        'bg-gray-200/20',
        variant === 'circular' && 'rounded-full',
        variant === 'text' && 'rounded',
        variant === 'rectangular' && 'rounded-lg',
        animation === 'pulse' && 'animate-pulse',
        animation === 'wave' && 'animate-shimmer',
        className
      )}
      style={{ width, height }}
    />
  )
}

// 卡片骨架屏
export function CardSkeleton() {
  return (
    <div className="glass-effect-dark rounded-2xl p-6 border border-white/10">
      <Skeleton variant="rectangular" height={200} className="mb-4" />
      <Skeleton variant="text" height={24} width="60%" className="mb-2" />
      <Skeleton variant="text" height={16} width="40%" />
    </div>
  )
}

// 3D 查看器骨架屏
export function ModelViewerSkeleton() {
  return (
    <div className="glass-effect-dark rounded-2xl p-6 border border-white/10">
      <div className="flex items-center justify-between mb-6">
        <Skeleton variant="text" width={150} height={32} />
        <div className="flex space-x-2">
          <Skeleton variant="rectangular" width={80} height={36} />
          <Skeleton variant="rectangular" width={80} height={36} />
        </div>
      </div>
      <Skeleton variant="rectangular" height={400} className="rounded-xl" />
      <div className="mt-6 grid grid-cols-3 gap-3">
        {[1, 2, 3].map(i => (
          <Skeleton key={i} variant="rectangular" height={80} />
        ))}
      </div>
    </div>
  )
}

// 订单列表骨架屏
export function OrderListSkeleton() {
  return (
    <div className="space-y-4">
      {[1, 2, 3, 4].map(i => (
        <div key={i} className="glass-effect-dark rounded-xl p-4 border border-white/10">
          <div className="flex items-center space-x-4">
            <Skeleton variant="rectangular" width={80} height={80} />
            <div className="flex-1 space-y-2">
              <Skeleton variant="text" width="60%" height={20} />
              <Skeleton variant="text" width="40%" height={16} />
              <Skeleton variant="text" width="30%" height={16} />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

// 图片骨架屏
export function ImageSkeleton({ className }: { className?: string }) {
  return (
    <div className={cn('relative overflow-hidden bg-gray-200/10 rounded-lg', className)}>
      <div className="absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-gray-200/10 to-transparent" />
    </div>
  )
}

// 列表项骨架屏
export function ListItemSkeleton() {
  return (
    <div className="flex items-center space-x-4 p-4">
      <Skeleton variant="circular" width={48} height={48} />
      <div className="flex-1 space-y-2">
        <Skeleton variant="text" width="80%" height={16} />
        <Skeleton variant="text" width="60%" height={14} />
      </div>
    </div>
  )
}

